<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- AJAX：async javascript and xml
		
		异步：一件没有完成可以同时去做另一件事情
		后台数据格式：xml -->
		
	    发送ajax: open with live server-----http/https
	
		
		发送ajax请求：(请求头+请求体)
	    服务器端响应：（响应头+响应体）
		
		方法：
		open() 建立链接
		send() 发送数据
		getAllResponseHeaders() 获取响应头的全部信息
		getResponseHeader(XXX) 获取响应头的具体某个属性
		setRequestHeader(XXX,XXX) 设置请求头
		
		事件：
		onreadystatechange 注册侦听
		onabort 文件上传强制中断时
		onerror 错误时
		onprogress监控文件上传进度
		ontimeout 请求超时时触发
		
		属性：
		readyState 状态值 0-4
	    status 状态码  1XX---5XX
		statusTet 状态码的描述
		response 响应体  服务器是甚麽格式就是什么格式
		responseText 响应体 服务器格式是字符串
		responseXML 响应体  服务器格式是xml
		responseType（了解） 存储服务器返回数据的格式  
		空字符串{默认}、“arraybuffer”、“blob”、“document”、“json”、“text” 
		这些格式就是服务器支持的返回给客户端的数据格式
		timeout 超时时间
		withCredentials 是否允许携带跨域资源凭证(cookie)
		
		<script src="md5.min.js"></script>
		<script>
			//创建核心对象--很多属性和方法
			var xhr=new XMLHttpRequest();
			console.log(xhr);
			
			xhr.open("POST","http://127.0.0.1:9999/user/login");
			
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

			xhr.onreadystatechange=function(){
				// if(xhr.readyState===2){
				//     //请求成功 2开头或3开头都是成功
				// 	if(xhr.status>=200&&xhr.status<400){
				// 		//获取响应头信息
				// 		//格林尼治时间
				// 		//console.log(xhr.getResponseHeader('Date'));
				// 		//格林尼治时间---》北京时间
				// 		let beijingTime=new Date(xhr.getResponseHeader('Date'));
				// 		console.log(beijingTime);
				// 	}
				// }
				
				if(xhr.readyState===4){
				    //请求成功 2开头或3开头都是成功
					if(xhr.status>=200&&xhr.status<400){
					    console.log(xhr.response);
					}
				}
			}
		
			xhr.send(`account=18310612838&password=${md5("1234567890")}`);
			
			//发送数据(接口文档，尤其post)
			//get类 ： 放在url的后面，url放在请求头  send(null)  字符串
			//post类:  直接放到请求体里面
			
			//none(默认)     text/plain;charset=UTF-8  普通字符串
			
			// form-data  主要应用于文件的上传或者表单数据提交
			// 1.设置请求头的格式
			// xhr.setRequestHeader('Content-Type', 'multipart/form-data');
			// 2.发送 form-Data 格式数据
			// let fd=new FormData;
			// fd.append("account","xxx");
			// fd.append("password","xxx");
			// xhr.send(fd);

			// x-www-form-urlencoded  urlencoded 格式字符串 name=xxx&age=xx
			//1.设置请求头的格式
			//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			//2.发送 urlencoded 格式字符串
			//xhr.send("account=xxx&password=xxx");
			//xhr.send(`account=18310612838&password=${md5("1234567890")}`);
			
			// raw 字符串  //1.设置请求头的格式
			// 普通字符串  -> text/plain
			// JSON字符串 -> application/json  => JSON.stringify/parse  「常用」
			// XML格式字符串 -> application/xml
			
			// binary 进制数据文件「buffer/二进制...」 //1.设置请求头的格式
			// https://www.cnblogs.com/ryzz/p/13853633.html
			
			// 一般也应用于文件上传
			// 图片 -> image/jpeg
			// EXCEL -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
			// https://blog.csdn.net/u013749540/article/details/78195266
			
			// GraphQL（新增的，类似于查询语句）
			//https://blog.csdn.net/u012014531/article/details/100983490
			
		</script>
	</body>
</html>
